<template>
  <section class="whaleyVR">
    <sprite-svg class="icon-svg"></sprite-svg>
    <div class="whaley-brand ">
      <p class="title whaleyVR-title">
        <span class="text">联系方式：</span>
      </p>
      <ul class="contactus-list">
        <li>
          <svg class="icon"> 
            <use xlink:href="#icon-ie" />
          </svg>
          <a href="http://whaley-vr.com/" target="_blank" class="contactus-list__text" @click="targetWhaleyVR">http://whaley-vr.com/</a>
        </li>
        <li>
          <svg class="icon"> 
            <use xlink:href="#icon-phone" />
          </svg>
         <a href="javascript:;" class="contactus-list__text" @click="copy"><b>400-660-5311</b></a>
        </li>
        <li>
          <svg class="icon"> 
            <use xlink:href="#icon-wechat" />
          </svg>
         <span class="contactus-list__text" @click="copy">微信公众号：<b>微鲸VR</b></span>
        </li>
        <li>
          <svg class="icon"> 
            <use xlink:href="#icon-sina" />
          </svg>
         <span class="contactus-list__text" @click="copy">微博账号：<b>微鲸VR</b></span>
        </li>
        <li>
          <svg class="icon"> 
            <use xlink:href="#icon-qq" />
          </svg>
         <a href="javascript:;" class="contactus-list__text" @click="copy">粉丝群：<b>467306966</b></a>
        </li>
      </ul>
      <ul class="contactus-bd gradient-text">
        <li @click="copy">内容合作：<b>vr-content@whaley.cn</b></li>
        <li @click="copy">市场合作：<b>vr-mkt@whaley.cn</b></li>
        <li @click="copy">商务合作：<b>VR-BD@whaley.cn</b></li>
        <li @click="copy">广告合作：<b>VR-AD@whaley.cn</b></li>
        <li @click="copy">销售邮箱：<b>VR-sales@whaley.cn</b></li>
      </ul>
    </div>
  </section>
</template>
<script>
  import { actions, go, widget } from '@haohuawu/whaleyvr-hybrid-sdk-js'
  import SpriteSvg from './svg.vue'

  export default {
    components: { SpriteSvg },
    methods: {
      targetWhaleyVR () {
        go.toOutsideBrowser('http://whaley-vr.com/')
      },
      copy (e) {
        const text = e.target.lastChild.textContent
        actions.copyToClipboard(text).then(() => {
          widget.toast('复制成功')
        })
      },
      fontSize () {
        const rootDOM = getComputedStyle(document.body.parentElement)
        const rootFontSize = rootDOM.getPropertyValue('font-size')
        if (rootFontSize) {
          return rootFontSize.slice(0, -2)
        }
        return 16
      }
    }
  }
</script>
<style lang="scss" scoped>
  // #2b60b7
  $border-color: #23577a;
  $box-shadow-color: #455edd;

  .contactus-list {
    font-size: .33rem;
    padding: .53rem 0 .8rem 1.6rem;
    width: 7.17rem;
    li {
      margin: 0 0 .3rem;
      padding: .065rem 0 .07rem .25rem;
      color: #9edcff;
      border: 1px solid $border-color;
      border-radius: .06rem;
      box-shadow: 0 0 .1rem .02rem $box-shadow-color;
      background-color: rgba(4, 19, 51, .35);
      list-style-type: none;
    }
    a {
      color: #9edcff;
      text-decoration: underline;
      font-weight: bold;
    }
    .contactus-list__text {
      display: inline-block;
      width: 5rem;
      padding: .17rem 0 .19rem;
      text-align: center;
      border-left: 1px solid; 
    }
  }
  .contactus-bd {
    position: relative;
    width: 8.14rem;
    min-height: 4rem;
    height: fit-content;
    margin: 0 auto;
    box-sizing: border-box;
    padding: .2rem  0 .2rem 1.65rem;
    font-size: .33rem;
    color: #9edcff;
    
    li {
      margin: .3rem 0;
    }
  }
  .icon {
    width: .85rem;
    height: .85rem;
    vertical-align: middle;
    margin-right: .2rem;
  }
  .icon-svg {
    opacity: 0;
    width: 0;
    height: 0;
  }
  b {
    font-weight: normal;
  }
</style>
